<script setup>

import { ElMessage } from 'element-plus'
import useUserStore from '/src/stores/user'
import usePageStore from '/src/stores/page/index.js'
import { useRouter } from 'vue-router'
import '/src/constant'
import { ORIGIN_DATASET_STR, TRAIN_DATASET_STR, UPLOAD_DATASET_STR } from '@/constant.js'

const useUser = useUserStore()
const usePage = usePageStore()
const router = useRouter()
// 头像使用当前用户名的第一个字符来表示
const avatarChar = ref('A')

// 提示用户正在开发中
const toSetup = () => {

  ElMessage({
    message: '开发中',
    type: 'error'
  })
}

// 退出登录
const handleCommand = (command) => {
  if (command === 'exitLogin') {
    // 清空用户登录信息，并返回到登录页面
    useUser.clearUserInfo()
    ElMessage.info({ message: '退出成功' })
    router.push('/login')
  }
}

const changePage = (pageName) => {
  usePage.updatePageName(pageName)
}

onMounted(() => {
  avatarChar.value = useUser?.userInfo?.username?.charAt(0)
})

</script>

<template>
  <el-header class='header'>
    <div class='left'>
      <img src='@/assets/logo-new.png' alt='Logo' class='logo' />
      <span class='title'>数据标注系统</span>
    </div>
    <div class='left'>
      <el-button @click='changePage(ORIGIN_DATASET_STR)'>原始数据集</el-button>
      <el-button @click='changePage(UPLOAD_DATASET_STR)'>上传数据集</el-button>
      <el-button @click='changePage(TRAIN_DATASET_STR)'>训练数据集</el-button>
    </div>
    <div class='right'>
      <el-dropdown @command='handleCommand'>
        <el-avatar :style="{ backgroundColor: '#1e438d' }">{{avatarChar }}</el-avatar>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item command='exitLogin'>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #171717;
  /* 你可以自定义背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 示例阴影效果 */
}

.left {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.logo {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.title {
  margin: 0;
}

.right {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
</style>